<!--Login.vue-->
<template>
  <header :title="state.type == 'login' ? '登录' : '注册'" />
  <div class="auth">
    <!--2-->
    <van-form class="form-wrap" v-if="state.type == 'login'" @submit="onSubmit">
      <div class="form">
        <van-field
          clearable
          v-model="state.username"
          name="username"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账户' }]"
        />
        <van-field
          clearable
          v-model="state.password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </div>
      <div style="margin: 16px 0">
        <van-button round block type="primary" native-type="submit">登录</van-button>
        <!--3-->
        <p @click="changeType('register')" class="change-btn">没有账号，前往注册</p>
      </div>
    </van-form>
    <!--4-->
    <van-form class="form-wrap" @submit="onSubmit" v-if="state.type == 'register'">
      <div class="form">
        <van-field
          clearable
          v-model="state.username"
          name="username"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          clearable
          v-model="state.password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field clearable label="验证码" placeholder="输入验证码" v-model="state.verify">
          <template #button>
            <Verifyimg ref="verifyRef" />
          </template>
        </van-field>
      </div>
      <div style="margin: 16px 0">
        <van-button round block type="primary" :loading="state.loading" native-type="submit">
          注册
        </van-button>
        <!--5-->
        <p @click="changeType('login')" class="change-btn">登录已有账号</p>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import Header from "@/components/Header.vue";
import axios from "../utils/axios";
import { showFailToast, showSuccessToast } from "vant";
import Verifyimg from "@/components/Verify.vue";
import { useRouter } from "vue-router";

const router = useRouter();
// 便于拿到 verifyRef 组件内的实例属性
const verifyRef = ref(null);
const state = reactive({
  username: "",
  password: "",
  type: "login", //登录
  loading: false, //点击注册加载
  verify: "", // 验证码输入框输入的内容
  imgCode: "", // 生成的验证图片内的文字
});

toRefs(state);
//提交注册\
const onSubmit = async (values: any) => {
  try {
    if (state.type == "login") {
      const { data } = await axios.post("/user/login", {
        username: state.username,
        password: state.password,
      });

      localStorage.setItem("token", data.token);
      router.push("/Home");
    } else {
      console.log(verifyRef.value.imgCode);
      verifyRef.value.target as HTMLElement; // 将 event.target 断言为 HTMLElement 类
      state.imgCode = verifyRef.value.imgCode || "";
      if (state.imgCode != state.verify) {
        showFailToast("验证码错误");
        return;
      }
      state.loading = true;
      axios.post("/user/register", {
        username: state.username,
        password: state.password,
      });
      showSuccessToast("注册成功");
      state.type = "login";
      state.loading = false;
    }
  } catch (error) {
    state.loading = false;
  }
};

const changeType = (type: string) => {
  state.type = type;
};
</script>

<style lang="scss" scoped>
.auth {
  padding: 150px 20px 0 20px;
  height: calc(100% - 46px);
  background: $primary;
  .logo {
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .form-wrap {
    .form {
      border-radius: 10px;
      overflow: hidden;
      .van-cell:first-child {
        padding-top: 20px;
      }
      .van-cell:last-child {
        padding-bottom: 20px;
      }
      .Verify {
        height: 200px;
        width: 200px;
      }
    }
  }
  .change-btn {
    text-align: center;
    margin: 10px 0;
    font-size: 14px;
    color: rgb(27, 28, 27);
  }
}
</style>
